<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS实现幻灯片</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="carousel-box">
		<div id="img-box">
			<img class="display" src="images/img01.jpg" alt="images">
			<img src="images/img02.jpg" alt="images">
			<img src="images/img03.jpg" alt="images">
			<img src="images/img04.png" alt="images">
			<img src="images/img05.jpg" alt="images">
			<img src="images/img06.jpg" alt="images">
			<img src="images/img07.jpg" alt="images">
			<img src="images/img08.jpg" alt="images">
			<img src="images/img09.jpg" alt="images">
			<img src="images/img10.jpg" alt="images">
		</div>
		<div id="index-box">
			<span class="active" onclick="myFunction(this)">1</span>
			<span onclick="myFunction(this)">2</span>
			<span onclick="myFunction(this)">3</span>
			<span onclick="myFunction(this)">4</span>
			<span onclick="myFunction(this)">5</span>
			<span onclick="myFunction(this)">6</span>
			<span onclick="myFunction(this)">7</span>
			<span onclick="myFunction(this)">8</span>
			<span onclick="myFunction(this)">9</span>
			<span onclick="myFunction(this)">10</span>
		</div>
	</div>
	<script src="script.js"></script>
</body>
</html>